<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../assets/css/layui.css">
		<link rel="stylesheet" href="../assets/css/view.css" />
		<link rel="icon" href="/favicon.ico"> 
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="../vendor/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>-->
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="../js/bootstarp-3.3.7/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

		<script>
			$(function() { //, headers: { 'x-requested-with': 'XMLHttpRequest' }
				$.ajaxSetup({
					crossDomain: true,
					xhrFields: {
						withCredentials: true
					}
				});
			});
		</script>

		<script type="text/javascript">
			$(function() {

				$("#table").bootstrapTable({
					type: "post",
					url: "http://127.0.0.1:8099/gysxxwh/getAllSupplier",
					pagination: true,
					pageSize: 5,
					queryParams: queryParam,
					columns: [{
						field: 'sid',
						title: '序号',
						align: 'center',

					}, {
						field: 'supplier_name',
						title: '供应商',
						align: 'center',

					}, {
						field: 'contact_name',
						title: '联系人',
						align: 'center',

					}, {
						field: 'contact_telephone',
						title: '座机',
						align: 'center',

					}, {
						field: 'contact_mobile',
						title: '手机',
						align: 'center',

					}, {
						field: 'bank_account',
						title: '银行账号',
						align: 'center',

					}, {
						field: 'address',
						title: '地址',
						align: 'center',

					}, {
						field: 'create_time',
						title: '创建日期',
						align: 'center',

					}, {
						field: 'sid',
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							return "<button  class='btn btn-primary' onclick='upd(" + row.sid + ")'>编辑</button><button  class='btn btn-default' onclick='del(" + row.sid + ")'>删除</button>"
						}

					}]
				})

				//     		  $("#suppliername").blur(function() {
				//     		   var str = $(this).val();
				//     		   var ret =  /^[\u4E00-\u9FA5A-Za-z]+$/;    
				//     		    if(ret.test(str)){
				//               /* alert('ok');*/
				//            }else{                
				//             	alert('输入有误(只能输入中文和英文,并且姓名不能为空)');
				//             	 $(this).val('') ;                   }
				//             
				//     		  });
				//     		  
				//     		  $("#contact_telephone").blur(function() {
				//     		  
				//     		  })
				//     		  
				//     		  $("#contact_mobile").blur(function() {
				//     		  	var ctm =$(this).val();
				//     		  	var ct =/^1[3,5,8]\d{9}$/;
				//     		  	if (ct.test(ctm)) {
				//     		  		
				//     		  	} else{
				//     		  		layer.alert('座机号码格式不正确',{icon: 6,time:1000});
				//     		  		$("#contact_mobile").val('');
				//     		  	}
				//     		  }) 

			})

			function sel() {
				/*alert(123);*/
				$("table").bootstrapTable('refresh');

			}

			function queryParam() {

				return {
					'string': $("#supplier_name").val()

				}
			}

			function myModalShow() {
				$("#myModal").modal('show');

			}

			function upd(sid) {
			
				$("#myModall").modal('show');
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8099/gysxxwh/selid",
					data: "sid=" + sid,
					success: function(data) {
						$("#sid").val(data.sid);
						$("#suppliername1").val(data.supplier_name);
						$("#address1").val(data.address);
						$("#contact_name1").val(data.contact_name);
						$("#contact_mobile1").val(data.contact_mobile);
						$("#contact_telephone1").val(data.contact_telephone);
						$("#bank_account1").val(data.bank_account);
					}
				});

			}

			function queren() {
				var sss = $("#sid").val();
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8099/gysxxwh/updS",
					data: $("#for1").serialize() + "&sid=" + sss,
					success: function(data) {
						$("#myModall").modal('hide');
						$("#table").bootstrapTable('refresh');

					}
				});
			}

			function del(sid) {
				alert("确定删除此条数据吗?")
				
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8099/gysxxwh/delS",
					data: "sid=" + sid,
					success: function(data) {
						$("#table").bootstrapTable('refresh');
					}
				});

			}
		</script>
	</head>

	<body class="layui-view-body">
		<div class="layui-content">
			<!-- <div class="layui-page-header">
            <div class="pagewrap">
               
                <h2 class="title">供应商组</h2>
            </div>
        </div>-->
			<div class="layui-row">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="form-box">
							<div class="layui-form layui-form-item">
								<div class="layui-inline">

									<div class="layui-form-mid">供应商/联系人:</div>
									<div class="layui-input-inline" style="width: 100px;">
										<input type="text" id="supplier_name" autocomplete="off" class="layui-input" oninput="sel()">
									</div>
									<button type="button" class="layui-btn layui-btn-blue" onclick='myModalShow()'>新增供应商</button>

								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>

		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel" style="text-align: center;">供应商维护</h4>
					</div>
					<div class="modal-body">
						<div class="layui-row">
							<div class="layui-card">
								<div class="layui-card-body">
									<div class="form-box">
										<div class="layui-form layui-form-item">
											<div class="layui-inline">
												<form id="for">
													<div class="layui-form-mid">供应商名称:</div>
													<div class="layui-input-inline" style="width: 400px;">
														<input type="text" lay-verify="required" id="suppliername" name="supplier_name" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">供应商地址:</div>
													<div class="layui-input-inline" style="width: 400px;">
														<input type="text" lay-verify="required" id="address" name="address" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">联系人姓名:</div>
													<div class="layui-input-inline" style="width: 400px;">
														<input type="text" lay-verify="required" id="contact_name" name="contact_name" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">座机号:</div>
													<div class="layui-input-inline" style="width: 430px;">
														<input type="text" lay-verify="required|cphone" id="contact_telephone" name="contact_telephone" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">手机号:</div>
													<div class="layui-input-inline" style="width: 430px;">
														<input type="text" lay-verify="required|phone" id="contact_mobile" name="contact_mobile" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">银行账号:</div>
													<div class="layui-input-inline" style="width: 415px;">
														<input type="text" lay-verify="required" id="bank_account" name="bank_account" autocomplete="off" class="layui-input">
													</div>
													
													
													
													<div>
														
														<button type="button" lay-submit="" lay-filter="addbtn" style="display:block;margin:0 auto"  class="btn btn-success">确认</button>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
						<table id="tab1"></table>
					</div>
					<div class="modal-footer">
						<!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>-->
					</div>
				</div>
			</div>
		</div>

		<!-- Modal -->
		<div class="modal fade" id="myModall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel" style="text-align: center;">供应商维护</h4>
					</div>
					<div class="modal-body">
						<div class="layui-row">
							<div class="layui-card">
								<div class="layui-card-body">
									<div class="form-box">
										<div class="layui-form layui-form-item">
											<div class="layui-inline">
												<form id="for1">
													<input type="hidden" id="sid" />
													<div class="layui-form-mid">供应商名称:</div>
													<div class="layui-input-inline" style="width: 400px;">
														<input type="text" id="suppliername1" name="supplier_name" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">供应商地址:</div>
													<div class="layui-input-inline" style="width: 400px;">
														<input type="text" id="address1" name="address" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">联系人姓名:</div>
													<div class="layui-input-inline" style="width: 400px;">
														<input type="text" id="contact_name1" name="contact_name" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">座机号:</div>
													<div class="layui-input-inline" style="width: 430px;">
														<input type="text" id="contact_telephone1" name="contact_telephone" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">手机号:</div>
													<div class="layui-input-inline" style="width: 430px;">
														<input type="text" id="contact_mobile1" name="contact_mobile" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-form-mid">银行账号:</div>
													<div class="layui-input-inline" style="width: 415px;">
														<input type="text" id="bank_account1" name="bank_account" autocomplete="off" class="layui-input">
													</div>
													<div>
														<button type="button" style="display:block;margin:0 auto" onclick="queren()" class="btn btn-success">确认</button>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
						<!--   <table id="tab1"></table>-->
					</div>
					<div class="modal-footer">
						<!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>-->
					</div>
				</div>
			</div>
		</div>

		<table id="table" border="1px"></table>
		<script src="../assets/layui.all.js"></script>
		<script>
			var element = layui.element;
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;

			form.on('submit(addbtn)', function() {

				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8099/gysxxwh/addS",
					data: $("#for").serialize(),
					success: function(data) {
						$("#myModal").modal('hide');
						$("#table").bootstrapTable('refresh');
						$("#suppliername").val('');
						$("#address").val('');
						$("#contact_name").val('');
						$("#contact_mobile").val('');
						$("#contact_telephone").val('');
						$("#bank_account").val('');

					}

				});
			})

			form.verify({
				cphone: function(value, item) {
					var are = value;
					var ar = /^(^0\d{2}-?\d{8}$)|(^0\d{3}-?\d{7}$)|(^0\d2 -?\d{8}$)|(^0\d3 -?\d{7}$)$/;
					if(!(ar.test(are))) {
						return '座机号码格式不正确';
					} 

				}

			})
		</script>
	</body>

</html>